<template>
  <div class="login">
    <!-- 顶部导航 -->
    <div class="nav">登录</div>
    <!-- 表单 -->
    <div class="content">
      <van-form ref="myform">
        <van-cell-group>
          <van-field
            placeholder="  请输入手机号"
            :rules="rules.phone"
            v-model="form.phone"
            name="phone"
          >
            <template #left-icon>
              <i class="iconfont icon-iphone"></i>
            </template>
          </van-field>
          <van-field
            :rules="rules.code"
            v-model="form.code"
            placeholder="  请输入验证码"
          >
            <template #left-icon>
              <i class="iconfont icon-lock"></i>
            </template>
            <van-button
              slot="button"
              size="mini"
              type="primary"
              round
              color="#3e9df8"
              @click="getcode"
            >
              发送验证码
            </van-button>
          </van-field>
          <div class="btn">
            <van-button type="info" size="large" round @click="login"
              >登录</van-button
            >
          </div>
        </van-cell-group>
      </van-form>
      <span class="tiaokuan">隐藏条款</span>
    </div>
  </div>
</template>

<script>
// 导入网络请求方法
import { getCodeApi, loginApi } from '../../api/login.js'
// 导入操作 local 的方法
import { localSet } from '../../utils/mylocal.js'
export default {
  data () {
    return {
      form: {
        phone: '13911112222',
        code: ''
      },
      // 验证的规则
      rules: {
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'onBlur' },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: '手机号不合法',
            trigger: 'onBlur'
          }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'onBlur' },
          {
            pattern: /\d{6}/,
            message: '验证码长度只能为6',
            trigger: 'onBlur'
          }
        ]
      },

      totalTime: 6
    }
  },
  methods: {
    // 验证码
    getcode () {
      // 验证手机号是否合法
      this.$refs.myform.validate(['phone']).then(async () => {
        // 添加一个 loading
        this.$toast.loading('正在获取验证码')
        // 设置一个定时器：用来进行倒计时
        const _inerval = setInterval(() => {
          // 总时长 --
          this.totalTime--
          // 判断
          if (this.totalTime <= 0) {
            clearInterval(_inerval)
            // 还原时间
            this.totalTime = 6
          }
        }, 1000)
        // 发送请求到服务器
        const res = await getCodeApi(this.form.phone)
        console.log(res)
        // 判断返回数据的正确性
        if (res.status === 200) {
          this.$toast.success('ok')

          this.form.code = '246810'
        } else {
          this.$toast.fail('请求失败')
        }
      })
    },
    // 登录
    async login () {
      // 添加加载效果
      this.$toast({
        type: 'loading',
        message: '正在登录...'
      })
      const mobile = this.form.phone
      const code = this.form.code
      // 登录请求
      const res = await loginApi(mobile, code)
      console.log(res.data.data)
      // 保存token
      localSet('token', res.data.data)
      this.$toast.clear()
      this.$router.push('/index')
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  position: relative;
  background-color: #e6e6e6;
  width: 100%;
  height: 100vh;
}
.nav {
  width: 100%;
  height: 45px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 45px;
  background-color: rgb(50, 150, 250);
}
.btn {
  padding: 40px 15px 0px;
  background-color: #e6e6e6;
}
.tiaokuan {
  font-size: 14px;
  position: absolute;
  bottom: 15px;
  left: 45%;
}
</style>
